//
//  HomeView.swift
//  BeautifulSwiftUI
//
//  Created by 移云 on 2020/7/27.
//  Copyright © 2020 MaoYeYeDeJiangCuCha. All rights reserved.
//

import SwiftUI

struct HomeView: View {
    
    @Binding var showProfile:Bool
    @State var showUpdate = false
    @Binding var showContent:Bool
    
    var body: some View {
        ScrollView {
            VStack {
                HStack {
                    Text("Watching")
                        .font(.system(size: 28, weight: .bold)) //优先级高于自定义
                    //                    .modifier(CustomFontModifier(size: 28))
                    
                    Spacer()
                    
                    ProfileView(showProfile: $showProfile)
                    
                    Button(action: { self.showUpdate.toggle() }){
                        Image(systemName: "bell")
                            .renderingMode(.original)
                            .font(.system(size: 16, weight: .medium))
                            .frame(width:36, height: 37)
                            .background(Color.white)
                            .clipShape(Circle())
                            .shadow(color: Color.black.opacity(0.1), radius: 1, x: 0, y: 1)
                            .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 10)
                    }
                    .sheet(isPresented: $showUpdate){
                        UpdateList()
                    }
                }
                .padding(.horizontal)
                .padding(.leading,14)
                .padding(.top,30)
                
                ScrollView(.horizontal,showsIndicators: false) {
                    WatchRingsView()
                        .padding(.horizontal,30)
                        .padding(.bottom,30)
                        .onTapGesture {
                            self.showContent.toggle()
                    }
                }
                
                ScrollView(.horizontal,showsIndicators: false) {
                    HStack(spacing:30) {
                        ForEach(sectionData) { item in
                            GeometryReader { geometry in  //获取滑动帧
                                SectionView(section: item)
                                    .rotation3DEffect(Angle(degrees: Double(geometry.frame(in: .global).minX - 30) / -20), axis:( x:0,y:10,z:0))
                                
                            }.frame(width:275,height:275)
                        }
                    }
                    .padding(30)
                    .padding(.bottom,30)
                }
                .offset(y:-30)
                
                HStack {
                    Text("Courses")
                        .font(.title).bold()
                    Spacer()
                }
                .padding(.leading,30)
                .offset(y:-60)
                
                
                SectionView(section: sectionData[2], width: UIScreen.main.bounds.width - 60 , height: 275)
                    .offset(y:-60)
                
                
                Spacer()
            }
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView(showProfile: .constant(false), showContent: .constant(false))
    }
}

struct SectionView: View {
    
    var section:Section
    var width:CGFloat = 275
    var height:CGFloat = 275
    
    var body: some View {
        VStack {
            HStack{
                Text(section.title)
                    .font(.system(size: 24, weight: .bold))
                    .frame(width: 160, alignment: .leading)
                    .foregroundColor(Color.white)
                Spacer()
                Image(section.logo)
            }
            Text(section.text.uppercased()) //大写
                .frame(maxWidth:.infinity,alignment: .leading)
            
            section.image
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width:210)
        }
        .padding(.top,20)
        .padding(.horizontal,20)
        .frame(width: width, height: height)
        .background(section.color)
        .cornerRadius(30)
        .shadow(color:section.color.opacity(0.3) , radius: 20, x: 0, y: 20)
    }
}

struct Section:Identifiable {
    var id = UUID()
    var title: String
    var text: String
    var logo: String
    var image: Image
    var color: Color
}

let sectionData = [
    Section(title: "Prototype designs with SwiftUI", text: "18 sections", logo: "Logo1", image: Image(uiImage:#imageLiteral(resourceName: "Card4") ), color: Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1))),
    Section(title: "Build a SwiftUI app", text: "20 sections", logo: "Logo1", image: Image(uiImage:#imageLiteral(resourceName: "Background1") ), color: Color(#colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1))),
    Section(title: "SwiftUI Advanced", text: "20 sections", logo: "Logo1", image: Image(uiImage:#imageLiteral(resourceName: "Card2") ), color: Color(#colorLiteral(red: 0.8549019694, green: 0.250980407, blue: 0.4784313738, alpha: 1)))
]



struct WatchRingsView: View {
    var body: some View {
        HStack(spacing: 30.0) {
            HStack(spacing: 12.0) {
                RingView(color1: #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1), color2: #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1), widthAndHeight: 44, precent: 68, show: .constant(true))
                
                VStack(alignment: .leading, spacing: 5.0) {
                    Text("6 minutes left").font(.subheadline).fontWeight(.bold)
                    Text("Watched 10 mins today").font(.caption)
                }
            }
            .padding(8)
            .background(Color.white)
            .cornerRadius(20)
            .modifier(ShadowModifier())
            
            HStack(spacing: 12.0) {
                RingView(color1: #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1), color2: #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1), widthAndHeight: 32, precent: 54, show: .constant(true))
            }
            .padding(8)
            .background(Color.white)
            .cornerRadius(20)
            .modifier(ShadowModifier())
            
            HStack(spacing: 12.0) {
                RingView(color1: #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1), color2: #colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1), widthAndHeight: 32, precent: 32, show: .constant(true))
            }
            .padding(8)
            .background(Color.white)
            .cornerRadius(20)
            .modifier(ShadowModifier())
        }
    }
}
